<template>
	<u-popup :modelValue="showPopup" height="800" mode="bottom" border-radius="40" :safe-area-inset-bottom="true">
		<view class="parse_box pdl-37 pdr-37 pdt-33">
			<scroll-view scroll-y="true" style="height: 580rpx;">
				<u-parse :html="content" :preview="false"></u-parse>
			</scroll-view>
			<view class="fade-overlay"></view>
			<view class="btn_box flex-ac flex-sb mgt-16">
				<view class="flex1">
					<u-button @click="handleDisagree"  class="disagree_btn fs32" shape="circle" :ripple="true"
						throttle-time="2000">不同意</u-button>
				</view>
				<view class="flex1 pdl-32">
					<u-button @click="handleAgree" :disabled="!countdownFinished" class="submit_btn fs32" shape="circle"
						:ripple="true" throttle-time="2000">{{buttonText}}</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { ref, watch,onMounted, onUnmounted } from "vue";
	
	const props = defineProps({
		showPopup:{
			type: Boolean,
			default: false
		},
	})
	
	const emit = defineEmits<{
		(e : 'update', data : boolean) : void;
		(e : 'back', data : boolean) : void;
	}>();
	
	let countdownTimer : number | null = null;
	
	const countdownTime = ref<number>(5)
	const countdownFinished = ref<boolean>(false);
	const buttonText = ref<string>(`同意(${countdownTime.value}s)`);
	const content = ref<string>(`借款协议

一、引言

本协议旨在规定用户与电子商务平台之间的权利和义务，保护用户的合法权益，维护平台的正常运营秩序。

二、定义

用户：指使用本电子商务平台的个人或实体。

平台：指提供电子商务服务的网站、移动应用或平台。

产品：指平台提供的各种商品或服务。

三、注册与账户

用户应根据平台要求提供身份信息进行注册，并保证所提供的信息真实、准确和完整。

用户注册成功后，将获得一个唯一的账户。用户应当妥善保管自己的账户信息，并对在账户下发生的一切行为负责。

用户不得以任何形式将自己的账户转让或授权给他人使用。如发现账户被盗用或有其他异常情况，用户应立即通知平台。

用户对使用其账户进行的操作和行为承担所有责任，包括但不限于购买商品、发布评价等。

四、用户权利与义务

用户有权根据平台的规定使用各项服务，并享受平台提供的权益。

用户应自行负责提供、发布自己的信息、内容和评价，并保证所提供的信息真实、合法、有效。

用户在使用平台过程中应遵守国家法律法规和其他规范性文件，不得利用平台从事违法、违规、侵权或影响平台正常运营的行为。

（以下为协议内容省略，实际内容应继续详细列举用户权利与义务、产品信息与购买、退换货与售后服务等条款）`)

	watch(() => props.showPopup, (newVal) => {
		console.log(newVal,'newVal')
	  if (newVal) {
	    startCountdown();
	  } 
	});
	
	const updateButtonText = () => {
		if (countdownTime.value >= 0) {
			buttonText.value = `同意(${countdownTime.value}s)`;
		} else {
			buttonText.value = '同意';
		}
	};

	const startCountdown = () => {
		countdownFinished.value = false;
		countdownTime.value = 5;
		updateButtonText();
		countdownTimer = setInterval(() => {
			countdownTime.value--;
			updateButtonText();
			if (countdownTime.value < 0) {
				if (countdownTimer) {
					clearInterval(countdownTimer);
					countdownTimer = null;
				}
				countdownFinished.value = true;
			}
		}, 1000);
	};
	
		
	const handleAgree =()=>{
		emit('update', false);
	}
	
	const handleDisagree =()=>{
		emit('back', false);
	}

	// onMounted(() => {
	// 	if(props.showPopup){
	// 		startCountdown();
	// 	}
	// });

	onUnmounted(() => {
		if (countdownTimer) {
			clearInterval(countdownTimer);
		}
	});
</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	.parse_box {
		background: #F8F9FD;
		position: relative;
		height: 100%;

		.fade-overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 500rpx;
			background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
			pointer-events: none;
			// z-index: 10;
		}

		.btn_box {

			// z-index: 11;
			.disagree_btn {
				height: 100rpx;
				opacity: .8;
			}

			.submit_btn {
				color: #FFFFFF;
				background: #3C51F2;
				height: 100rpx;
			}
		}
	}
</style>